<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="司机姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入司机姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入电话号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
        >
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="技能范围" prop="skill">
        <el-select
          v-model="queryParams.skill"
          placeholder="请选择技能范围"
          clearable
          size="small"
          multiple
          collapse-tags
        >
          <el-option
            v-for="dict in dict.type.skill_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      border
      :data="driverList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      stripe
      highlight-current-row
    >
      <el-table-column type="selection" align="center" width="50" />

      <el-table-column label="司机信息" align="center" width="160" fixed="left">
        <template slot-scope="scope">
          <div class="driver-info">
            <div class="driver-avatar">
              <el-avatar
                :src="scope.row.faceImg"
                :size="40"
                icon="el-icon-user-solid"
                style="background-color: #409eff"
              />
            </div>
            <div class="driver-details">
              <div class="driver-name">{{ scope.row.userName }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="手机号" align="center" width="130" fixed="left">
        <template slot-scope="scope">
          <div class="phone-info">
            <i
              class="el-icon-phone"
              style="color: #409eff; margin-right: 4px"
            ></i>
            {{ scope.row.phone }}
          </div>
        </template>
      </el-table-column>

            <el-table-column label="身份证号" align="center" width="150">
        <template slot-scope="scope">
          <div class="id-card-info">
            {{ scope.row.idCard || '-' }}
          </div>
        </template>
      </el-table-column>

              <el-table-column label="技能范围" align="center" width="180">
        <template slot-scope="scope">
          <div class="skill-tags">
            <template v-if="scope.row.skill">
              <el-tag
                v-for="skillValue in getSkillArray(scope.row.skill)"
                :key="skillValue"
                size="mini"
                type="success"
                style="margin: 2px;"
              >
                {{ getSkillLabel(skillValue) }}
              </el-tag>
            </template>
            <span v-else class="text-placeholder">未设置</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="积分/余额" align="center" width="120">
        <template slot-scope="scope">
          <div class="points-balance">
            <div class="integral">
              <i class="el-icon-star-on" style="color: #ffd700"></i>
              {{ scope.row.integral || 0 }}
            </div>
            <div class="balance">
              <i class="el-icon-money" style="color: #67c23a"></i>
              ¥{{ (scope.row.balance || 0).toFixed(2) }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        show-overflow-tooltip
        width="150"
      />

      <el-table-column label="更新时间" align="center" prop="updateTime" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改司机信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      append-to-body
      custom-class="driver-dialog"
      :before-close="cancel"
      center
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="driver-form"
      >
        <div class="dialog-header">
          <i class="el-icon-user header-icon"></i>
          <span class="header-text">司机信息</span>
        </div>
        <div class="form-container">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="司机姓名" prop="userName">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入司机姓名"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入电话号码"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input
                  v-model="form.idCard"
                  placeholder="请输入身份证号"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="技能范围" prop="skill">
                <el-select
                  v-model="skillArray"
                  placeholder="请选择技能范围"
                  :disabled="isView"
                  class="full-width-input"
                  clearable
                  multiple
                  collapse-tags
                  @change="handleSkillChange"
                >
                  <el-option
                    v-for="dict in dict.type.skill_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="驻点" prop="stationary">
                <el-input
                  v-model="form.stationary"
                  placeholder="请输入驻点"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择状态"
                  :disabled="isView"
                  class="full-width-input"
                  clearable
                >
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 积分余额展示 -->
          <div v-if="isView && form.id">
            <el-divider content-position="left" class="divider-title">积分余额信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="当前积分">
                  <div class="display-value">
                    <i class="el-icon-star-on" style="color: #ffd700; margin-right: 8px;"></i>
                    <span class="value-text">{{ form.integral || 0 }} 分</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户余额">
                  <div class="display-value">
                    <i class="el-icon-money" style="color: #67c23a; margin-right: 8px;"></i>
                    <span class="value-text">¥{{ (form.balance || 0).toFixed(2) }}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 证件照片上传 -->
          <el-divider content-position="left" class="divider-title"
            >证件信息</el-divider
          >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="司机照片" prop="faceImg">
                <image-upload
                  v-model="form.faceImg"
                  :limit="1"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证正面" prop="cardIdFrontImg">
                <image-upload
                  v-model="form.cardIdFrontImg"
                  :limit="1"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证反面" prop="cardIdBackImg">
                <image-upload
                  v-model="form.cardIdBackImg"
                  :limit="1"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="驾驶证正面" prop="drivingLicenceFrontImg">
                <image-upload
                  v-model="form.drivingLicenceFrontImg"
                  :limit="1"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="驾驶证反面" prop="drivingLicenceBackImg">
                <image-upload
                  v-model="form.drivingLicenceBackImg"
                  :limit="1"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注信息"
                  :disabled="isView"
                  :rows="3"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 查看模式下显示的只读信息 -->
          <div v-if="isView && form.id">
            <el-divider content-position="left" class="divider-title"
              >系统信息</el-divider
            >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input
                    v-model="form.createTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建者">
                  <el-input
                    v-model="form.createBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="更新时间">
                  <el-input
                    v-model="form.updateTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更新者">
                  <el-input
                    v-model="form.updateBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer" v-if="!isView">
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="submitForm"
          icon="el-icon-check"
          class="submit-btn"
          >确 定</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >关 闭</el-button
        >
      </div>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  driverList,
  deleteDriver,
  addDriver,
  queryDriverInfo,
  updateDriverInfo,
} from "@/api/api/driver";

export default {
  name: "DriverList",
  dicts: ["skill_type"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 司机信息表格数据
      driverList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否为查看模式
      isView: false,
      // 表单参数
      form: {},
      // 技能数组（用于多选）
      skillArray: [],
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "司机姓名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "司机姓名长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        skill: [
          { required: true, message: "技能范围不能为空", trigger: "blur" },
        ],
        stationary: [
          { required: true, message: "驻点不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        phone: null,
        status: null,
        skill: null,
        searchValue: null,
        remark: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 查询司机信息列表
     */
    getList() {
      this.loading = true;
      // 处理技能参数：如果是数组，转换为字符串
      const params = { ...this.queryParams };
      if (Array.isArray(params.skill)) {
        params.skill = params.skill.join(',');
      }
      driverList(params).then((response) => {
        this.driverList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /**
     * 搜索按钮操作
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置按钮操作
     */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        phone: null,
        status: 1, // 默认启用
        idCard: null,
        skill: null,
        stationary: null,
        integral: 0,
        balance: 0,
        faceImg: null,
        cardIdFrontImg: null,
        cardIdBackImg: null,
        drivingLicenceFrontImg: null,
        drivingLicenceBackImg: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.skillArray = [];
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.isView = false;
      this.open = true;
      this.title = "添加司机信息";
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      this.isView = true;
      const id = row.id;
      queryDriverInfo(id).then((response) => {
        this.form = response.data;
        this.setSkillArray();
        this.open = true;
        this.title = "查看司机信息";
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.isView = false;
      const id = row.id || this.ids;
      queryDriverInfo(id).then((response) => {
        this.form = response.data;
        this.setSkillArray();
        this.open = true;
        this.title = "修改司机信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改操作
            updateDriverInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            // 新增操作
            addDriver(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /**
     * 状态修改
     * @param {Object} row 行数据
     */
    handleStatusChange(row) {
      let text = row.status === 1 ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
        .then(function () {
          // 这里应该调用修改状态的API
          // return changeUserStatus(row.id, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === 0 ? 1 : 0;
        });
    },
    /**
     * 删除按钮操作
     */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除司机信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return deleteDriver(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /**
     * 导出按钮操作
     */
    handleExport() {
      this.download(
        "api/driver/export",
        {
          ...this.queryParams,
        },
        `driver_${new Date().getTime()}.xlsx`
      );
    },

    /**
     * 将技能字符串转换为数组
     * @param {string} skillStr 技能字符串，如 "1,2,3"
     * @returns {Array} 技能数组
     */
    getSkillArray(skillStr) {
      if (!skillStr) return [];
      return skillStr.split(',').filter(item => item.trim());
    },
    /**
     * 根据技能值获取技能标签
     * @param {string} skillValue 技能值
     * @returns {string} 技能标签
     */
    getSkillLabel(skillValue) {
      const dict = this.dict.type.skill_type.find(item => item.value === skillValue);
      return dict ? dict.label : skillValue;
    },
    /**
     * 技能选择变化处理
     * @param {Array} selectedSkills 选中的技能数组
     */
    handleSkillChange(selectedSkills) {
      this.form.skill = selectedSkills.join(',');
    },
    /**
     * 设置技能数组（用于编辑时回显）
     */
    setSkillArray() {
      if (this.form.skill) {
        this.skillArray = this.getSkillArray(this.form.skill);
      } else {
        this.skillArray = [];
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.driver-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.driver-dialog >>> .el-dialog__header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #1890ff, #0050b3);
  margin-right: 0;
}

.driver-dialog >>> .el-dialog__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
}

.driver-dialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
  font-size: 20px;
}

.driver-dialog >>> .el-dialog__body {
  padding: 30px 20px;
}

.driver-dialog >>> .el-dialog__footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.driver-form {
  padding: 0;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.header-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 10px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.form-container {
  margin-bottom: 20px;
  background-color: #f9fafc;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.form-container:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

.divider-title {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
}

.el-divider {
  margin: 24px 0;
}

.full-width-input {
  width: 100%;
}

.full-width-input >>> .el-input__inner {
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-input__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-input__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.full-width-input >>> .el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-textarea__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-textarea__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.submit-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(to right, #1890ff, #096dd9);
  border: none;
  transition: all 0.3s;
}


.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.cancel-btn {
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  margin-right: 16px;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.el-input-number.full-width-input {
  width: 100%;
}

.el-input-number.full-width-input >>> .el-input__inner {
  text-align: left;
}

/* 表格优化样式 */
.driver-info {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.driver-avatar {
  margin-right: 12px;
}

.driver-details {
  flex: 1;
  text-align: left;
}

.driver-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  font-size: 14px;
}

.phone-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.identity-info,
.service-info,
.skill-tags,
.points-balance,
.certificate-status {
  line-height: 1.5;
}

.identity-info .id-card,
.service-info,
.points-balance .integral,
.points-balance .balance {
  margin-bottom: 4px;
}

.skill-stationary .stationary {
  font-size: 12px;
  color: #606266;
}

.points-balance {
  text-align: center;
}

.points-balance .integral,
.points-balance .balance {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-bottom: 2px;
}

.points-balance .integral i,
.points-balance .balance i {
  margin-right: 4px;
}

.certificate-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.service-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}

.text-placeholder {
  color: #c0c4cc;
  font-size: 12px;
}

.display-value {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
}

.value-text {
  font-weight: 600;
  color: #303133;
}

.id-card-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #303133;
}
</style>
